<template>
  <div class="hm-recommend">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="article" v-for="item in list" :key="item.id" @click="ToDetail(item.id)">
          <div class="header">
            <img :src="item.avatar" alt="头像" width="50px" height="50px" />
            <div class="user">
              <div class="nickname">{{ item.stem }}</div>
              <div class="info">{{ item.creator }} | {{ item.createdAt }}</div>
            </div>
          </div>
          <div class="content">{{ item.content }}</div>
          <div class="footer">
            <div>点赞 {{ item.likeCount }} | 浏览 {{ item.views }}</div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import instance from '@/utils/request'

export default {
  components: {},
  props: {},
  data() {
    return {
      list: [],
      finished: false, // 数据是否全部加载完毕
      loading: false, // 上拉加载状态
      refreshing: false, // 下拉刷新状态
      params: { current: 1, pageSize: 10, sorter: '' }
    }
  },
  computed: {},
  watch: {},
  created() {
    // this.getList()
  },
  mounted() {},
  methods: {
    async getList(isLoad = true) {
      const res = await instance({
        url: '/h5/interview/query',
        params: this.params,
        
      })
      console.log(res)
      if (isLoad) {
        this.list.push(...res.data.data.rows)
      } else {
        this.list = res.data.data.rows
      }
      this.pageTotal = res.data.data.pageTotal
    },
    async onLoad() {
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
        await this.getList(false)
      } else {
        await this.getList()
      }
      this.params.current++
      this.loading = false
      if (this.params.current === this.pageTotal) {
        this.finished = true
      }
    },
    async onRefresh() {
      this.finished = false
      this.params.current = 1
      this.loading = true
      this.onLoad()
    },
    ToDetail(id) {
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>
<style lang="less" scoped>
.hm-recommend {
  padding: 10px;
  .article {
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    .header {
      display: flex;
      align-items: center;
      .user {
        margin-left: 20px;
      }
    }
    .content {
      margin: 10px 0;
      // text-indent: 2em;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .footer {
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}
</style>
